<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="name">
        <el-input v-model="list.filter.name" placeholder="输入满减券名称搜索" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item prop="status">
        <KiSelect
          :index.sync="list.filter.status"
          :options="['停用', '启用']"
          placeholder="状态"
        />
      </el-form-item>

      <el-button @click="reset">重置</el-button>
    </el-form>

    <div class="table-operation">
      <span>
        <AuthButton @click="c" name="新增" />
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table :data="list.data" v-bind="tableProp">
      <el-table-column align="center" type="index" />
      <el-table-column label="选择的满减券名称" prop="couponName" />
      <el-table-column label="积分售价" prop="integralNum" />
      <el-table-column label="创建时间" prop="createTime" />
      <!-- <el-table-column label="状态">
        <template slot-scope="{ row }">
          <Tag :value="row.status" options="status" />
        </template>
      </el-table-column> -->
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <AuthButton @click="r(row)" name="查看" />
          <AuthButton @click="lookCoupon(row)" name="查看满减券" circle>
            <i class="el-icon-s-promotion"></i>
          </AuthButton>
          <AuthButton @click="u(row)" name="编辑" />
          <AuthButton @click="d(row)" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
    >
      <template #el-form>
        <el-form-item label="选择满减券" prop="couponId" :verify="{ minLength: 2, maxLength: 20 , required: true}">
          <el-select v-model="form.data.couponId" filterable remote placeholder="请输入满减券名称搜索" :remote-method="getCoupon" :loading="couponLoading">
            <el-option v-for="item in couponList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <form-item-tip>
            <div>1. 满减券需要在珊瑚礁后台【营销活动--满减券管理】中新增；</div>
            <div>2. 一张满减券只能在一个活动中使用，请不要重复使用满减券。</div>
          </form-item-tip>
        </el-form-item>
        <el-form-item label="积分售价" prop="integralNum" verify>
          <el-input-number v-model="form.data.integralNum" :min="1" :max="1000000" :precision="0" placeholder="输入大于0的正整数" />
        </el-form-item>
        <el-form-item label="详情页图集" prop="pictureUrl" verify>
          <Imgpond
            v-model="form.data.pictureUrl"
            :count="9"
            value-type="array"
            aspectRatio="375/261"
          />
        </el-form-item>
        <el-form-item label="使用规则" prop="rule" verify>
          <MiniMCE v-model="form.data.rule" :disabled="form.status === 'r'" />
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
export default {
  mixins: [pageMixin],
  data () {
    return {
      couponLoading: false,
      couponList: []
    }
  },
  watch: {
    'form.data.id' (n, o) {
      if (n && o === undefined) {
        this.couponList = [
          {
            id: this.form.data.couponId,
            name: this.form.data.couponName
          }
        ]
      }
    }
  },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/vip/vip-coupon',
    }
  ),
  created () {
    this.getCoupon()
  },
  methods: {
    getCoupon (name = '') {
      this.couponLoading = true
      this.couponList = []
      this.$POST('sot-admin-api/product/full-coupon/queryForList',
        {
          name,
          frontStatus: 1
        })
        .then(res => {
          if (res.errorCode == '00000') {
            this.couponList = res.data
          }
        })
        .finally(() => {
          this.couponLoading = false
        })
    },
    lookCoupon (row) {
      // 查看满减券
      this.$qk.push('/marketing#/coupon-center/coupon/index?id=' + row.couponId)
    }
  }
}
</script>